import React, { useState } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  FlatList, 
  SafeAreaView, 
  TouchableOpacity 
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../navigation/types';

// 定义历史记录项的类型
interface HistoryItem {
  id: string;
  topic: string;
  date: string;
  type: string;
  style: string;
  lengthRange: string;
  effect: string;
  content: string;
}

// 模拟历史记录数据
const mockHistoryData: HistoryItem[] = [
  {
    id: '1',
    topic: '人工智能技术的历史和应用场景',
    date: '2025-04-07 10:30',
    type: '文章',
    style: '科普',
    lengthRange: '2000-3000',
    effect: '优质',
    content: '人工智能技术的发展历程可以追溯到20世纪50年代...'
  },
  {
    id: '2',
    topic: '全球气候变化的影响与应对措施',
    date: '2025-04-06 15:45',
    type: '报告',
    style: '学术',
    lengthRange: '3000-5000',
    effect: '超优质',
    content: '全球气候变化是当今人类面临的最严峻挑战之一...'
  },
  {
    id: '3',
    topic: '中国传统文化在现代社会的传承与创新',
    date: '2025-04-05 09:20',
    type: '论文',
    style: '文学',
    lengthRange: '5000-8000',
    effect: '引用网络数据',
    content: '中国传统文化博大精深，源远流长...'
  }
];

const AITextHistoryScreen = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const [historyData] = useState<HistoryItem[]>(mockHistoryData);
  
  const handleHistoryItemPress = (item: HistoryItem) => {
    navigation.navigate('AITextResult', { 
      result: {
        topic: item.topic,
        content: item.content,
        type: item.type,
        style: item.style,
        lengthRange: item.lengthRange,
        effect: item.effect
      }
    });
  };
  
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={styles.backButton}>{'<'}</Text>
        </TouchableOpacity>
        <Text style={styles.title}>历史记录</Text>
        <View style={{ width: 30 }} />
      </View>
      
      <FlatList
        data={historyData}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity 
            style={styles.historyItem}
            onPress={() => handleHistoryItemPress(item)}
          >
            <Text style={styles.historyTopic} numberOfLines={1}>{item.topic}</Text>
            <Text style={styles.historyDate}>{item.date}</Text>
            <View style={styles.historyInfo}>
              <Text style={styles.historyInfoText}>{item.type}/{item.style}</Text>
              <Text style={styles.historyInfoText}>{item.lengthRange}</Text>
              <View style={styles.historyEffectTag}>
                <Text style={styles.historyEffectText}>{item.effect}</Text>
              </View>
            </View>
            <Text style={styles.historyPreview} numberOfLines={2}>{item.content}</Text>
          </TouchableOpacity>
        )}
        contentContainerStyle={styles.listContent}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        ListEmptyComponent={
          <View style={styles.emptyContainer}>
            <Text style={styles.emptyText}>暂无历史记录</Text>
          </View>
        }
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingTop: 15,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  backButton: {
    fontSize: 24,
    paddingHorizontal: 5,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  listContent: {
    padding: 15,
  },
  historyItem: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  historyTopic: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 5,
    color: '#333',
  },
  historyDate: {
    fontSize: 14,
    color: '#999',
    marginBottom: 10,
  },
  historyInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  historyInfoText: {
    fontSize: 14,
    color: '#666',
    marginRight: 10,
  },
  historyEffectTag: {
    backgroundColor: '#e6f7ff',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
  },
  historyEffectText: {
    fontSize: 12,
    color: '#4a90e2',
  },
  historyPreview: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
  separator: {
    height: 15,
  },
  emptyContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 50,
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
  },
});

export default AITextHistoryScreen; 